<template lang="html">
  <div class="login">
    <v-header>
      <h1 slot="title">登录页</h1>
    </v-header>
    <img src="../assets/phoneLogin.png" alt="">
    <section class="loginFrom">

      <mt-field label="账号" v-model="account"
                placeholder="请输入账号">
      </mt-field>
      <mt-field
        label="密码"
        placeholder="请输入密码"
        type="password"
        v-model="captcha"
        :readonly='!toggle'
        :disableClear='!toggle'
      ></mt-field>
    </section>
    <mt-button
      plain
      size="large"
      class="btn"
      @click="appLoginMobile"
    >登录
    </mt-button>
  </div>
</template>

<script>
import Header from '@/common/_header.vue'
import {Toast} from 'mint-ui'
import {
  appSendCode,
  appLogin
} from '@/http/api'

export default {
  components: {
    'v-header': Header
  },
  data() {
    return {
      account: '',
      captcha: '',
      toggle: !this.$store.state.login.token,
      spread_spid: '',
      show: true,
      count: '',
      timer: null,
    }
  },
  methods: {
    // 登录按钮
    async sendCode() {
      const parmas = {
        phone: this.account
      }
      const res = await appSendCode(parmas)
      if (res.code * 1 === 200) {
        this.getCode()
      }
      Toast(res.message)
    },

    async appLoginMobile () {
      const parmas = {
        account: this.account,
        password: this.captcha,
      }
      const res = await appLogin(parmas)
      if (res.code * 1 === 200) {
        this.$store.commit('CHANGE_TOKEN', 1)
        localStorage.setItem('UserMessage', JSON.stringify(res.data))
        Toast(res.message)
        this.$router.push({
          path: '/'
        })
      } else {
        Toast(res.message);
      }
    },

    getCode(){
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
    }
  },
  created () {
    this.spread_spid = localStorage.getItem('shareId')
  }
}

</script>

<style lang="less" scoped>
@import '../assets/fz.less';
@import '../assets/index/style.css';
@import '../assets/user/icon/carstyle.css';
/deep/ .mint-field-core {
  height: 40px;
}

.login {
  > section {
    .tip {
      padding: 6vw 3vw;
      color: #048AB9;
      letter-spacing: 2px;
      font-size: 16px;
    }
  }
}

img {
  width: 100%;
}

.loginFrom {
  padding: 10px;
  box-sizing: border-box;
}

.btn {
  width: 80%;
  background: #048AB9;
  color: white;
  display: block;
  margin: 20px auto 0;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  border: 0;
}

.moveTo {
  display: flex;
  margin-right: 20px;
  justify-content: flex-end;
  margin-top: 20px;
  color: #4caf50;
}
.loginFrom /deep/ .mint-cell-value > .mint-field-core {
  height: 40px;
}
</style>
